<template>
	<view class="apply-box">
		<view class="box">
			<view class="flex-between-center account" @click="selectBank" >
				<view class="title">提现账户</view>
				<view class="flex-align-center select" :class="form.bankName.length>0?'selected':''" >
					{{form.bankName?form.bankName:'请选择提现到账银行卡'}}<image src="@/static/images/grayRight.png" mode=""></image>
				</view>
			</view>
			<view class="money">
				<view class="title">提现金额</view>
				<view class="input flex-align-center">
					¥ <input type="number" v-model="form.point" placeholder="请输入提现金额" value="" />
				</view>
			</view>
			<view class="withdrawMaxMoney flex-between-center">
				<view class="left">最多可提现金额：<text>¥{{money/10 || 0}}</text> </view>
				<view class="right" @click="allWithdraw" >全部提现</view>
			</view>
			<view class="flex-aj-center now" @click="withdraw" >立即提现</view>
		</view>
		<view class="tips">
			<view class="title flex">提现须知</view>
			<view class="content">
				<p>提现到账时效？</p>
				<p>到账时间根据提现操作时选择的银行1-3个工作日到账，具体到账时间请以银行为准。</p> 
				
				<p>提现记录</p>
				<p>发起提现操作后，可以在提现记录中查询提现的进度和状态；</p>
				<p class="flex-align-center" >操作路径：<view @click="goBack" >【资金管理】</view>->【提现】-><view @click="goWithdraw" >【提现记录】</view></p>
			</view>
		</view>
		<u-popup class="popupBox" v-model="showCard"  mode="bottom" border-radius="24"  height="892rpx" :safe-area-inset-bottom="true" >
			<view class="title flex-aj-center">选择提现银行卡 <image @click.stop="showCard = false" src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/71601714185440703.png" mode=""></image> </view>
			<scroll-view scroll-y="true" style="height: 660rpx;" >
				<view class="list">
					<view class="item" v-for="(item,index) in bankList" :key="index" :class="index==0?'bg1':index==1?'bg2':'bg3'" @click="select(index)" >
						<view class="bank flex-align-center">
							<image src="" class="icon" mode=""></image>
							<view>{{item.gsBankName}}</view>
							<image v-show="current!=index" class="selected" src="@/static/images/no2.png" mode=""></image>
							<image v-show="current==index" src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/10441714185612064.png" class="selected" mode=""></image>
						</view>
						<view class="number flex-align-center">
							<view>{{item.cardNumber.slice(0,4)}}</view>
							<view>****</view>
							<view>****</view>
							<view>****</view>
							<view>{{item.cardNumber.slice(-4)}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bottomTab">
				<view class="flex-aj-center" @click="confirmSelect" >确认选择</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getBankList,
		getUserInfo,
		withdrawPoint
	} from "@/api/user.js"
	export default{
		data(){
			return{
				showCard:false,
				current:-1,
				bankList:[],
				form:{
					hhrBankId:'',
					point:'',
					bankName:''
				},
				money:0
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			this.getBankList()
		},
		methods:{
			selectBank(){
				const that = this;
				if(!this.bankList.length){
					uni.showModal({
						content:'您暂未绑定银行卡，是否前去绑定？',
						confirmText:'去绑卡',
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'/pages/myBankCard/addCard'
								})
							}
						}
					})
				}else{
					that.showCard = true
				}
				
			},
			goBack(){
				uni.navigateBack()
			},
			goWithdraw(){
				uni.navigateTo({
					url:'./withdrawRecord'
				})
			},
			allWithdraw(){
				this.$set(this.form,'point',this.money/10)
			},
			confirmSelect(){
				if(this.current>-1){
					this.form.hhrBankId = this.bankList[this.current].hhrBankId
					this.form.bankName = this.bankList[this.current].gsBankName
					this.showCard = false
				}else{
					this.$util.Tips({
						title:'请选择银行卡'
					})
				}
			},
			withdraw(){
				if(this.current==-1){
					this.$util.Tips({
						title:'请选择银行卡'
					})
				}else if( Number(this.form.hhrBankId)<=0){
					this.$util.Tips({
						title:'请输入大于0的提现金额'
					})
				}else{
					let data = {...this.form}
					data.point = data.point*10
					withdrawPoint(data).then(res=>{
						this.$util.Tips({
							title:res.msg
						},{
							tab:3,
							url:''
						})
					})
				}
			},
			select(index){
				this.current = index
			},
			getBankList() {
				getBankList({
					pageNum:1,
					pageSize:1000
				}).then(res=>{
					this.bankList = res.data.records
				})
			},
			getUserInfo(){
				getUserInfo().then(res=>{
					this.money = res.data.hhrInfo.currentPoint
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F7FA;
	}
</style>
<style lang="scss" scoped >
	/deep/ .u-drawer-content{
		position: fixed;
	}
	
	.popupBox{
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: relative;
		.title{
			width: 100%;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #292929;
			line-height: 32rpx;
			text-align: center;
			font-style: normal;
			position: relative;
			image{
				position: absolute;
				top: 28rpx;
				right: 24rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
		.list{
			padding: 24rpx;
			.item{
				margin-bottom: 24rpx;
				width: 100%;
				height: 256rpx;
				background-size: cover;
				padding: 56rpx 32rpx;
				
				&.bg1{
					background-image: url(https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/27751714185120587.png);
				}
				
				&.bg2{
					background-image: url(https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/73001714203240396.png);
				}
				
				&.bg3{
					background-image: url(https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/66741714203254253.png);
				}
				
				.bank{
					margin-bottom: 48rpx;
					.icon{
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						margin-right: 24rpx;
					}
					view{
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
						flex: 1;
					}
					.selected{
						width: 40rpx;
						height: 40rpx;
					}
				}
				.number{
					>view{
						width: 110rpx;
						height: 32rpx;
						font-family: D-DINExp;
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: center;
						font-style: normal;
						margin-right: 34rpx;
						&:last-child{
							margin-right: 0;
						}
					}
				}
			}
		}
		.bottomTab{
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 24rpx;
			background-color: #fff;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			view{
				width: 100%;
				height: 96rpx;
				background: #FF2945;
				border-radius: 48rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}
	
	.apply-box{
		padding: 24rpx;
		.box{
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 48rpx 24rpx;
			.account{
				padding-bottom: 48rpx;
				border-bottom: 2rpx solid #f5f5f5;
				.title{
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
				}
				.select{
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 28rpx;
					font-style: normal;
					image{
						width: 24rpx;
						height: 24rpx;
						margin-left: 4rpx;
					}
				}
				.selected{
					color: #333;
				}
			}
			.money{
				.title{
					padding: 48rpx 0;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 28rpx;
					font-style: normal;
				}
				.input{
					padding-bottom: 24rpx;
					border-bottom: 2rpx solid #F5F5F5;
					font-family: D;
					font-weight: normal;
					font-size: 64rpx;
					color: #292929;
					line-height: 64rpx;
					font-style: normal;
					input{
						width: 594rpx;
						height: 64rpx;
						font-family: D-DINExp;
						font-weight: bold;
						font-size: 64rpx;
						color: #292929;
						line-height: 64rpx;
						text-align: left;
						font-style: normal;
						margin-left: 24rpx;
					}
				}
			}
			.withdrawMaxMoney{
				padding: 32rpx 0 48rpx;
				.left{
					font-family: PingFangTC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 28rpx;
					font-style: normal;
					text{
						color: #292929;
					}
				}
				.right{
					font-family: PingFangTC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FF2945;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
				}
			}
			.now{
				width: 100%;
				height: 96rpx;
				background: #FF2945;
				border-radius: 16rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				font-style: normal;
			}
		}
		
		.tips{
			margin-top: 48rpx;
			.title{
				width: 320rpx;
				height: 80rpx;
				background-image: url(https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/60161714125716718.png);
				background-size: cover;
				margin: 0rpx auto;
				padding-top: 12rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #B8520F;
				line-height: 32rpx;
				font-style: normal;
				justify-content: center;
			}
			.content{
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #292929;
				line-height: 44rpx;
				text-align: justify;
				font-style: normal;
				margin-top: 16rpx;
				// text-align: center;
				>p{
					margin-bottom: 16rpx;
					line-height: 44rpx;
				}
			}
		}
	}
</style>